<template>
    <div>
        <page-main>
            <!-- tabs -->
            <el-tabs v-model="search.xiansuo_status" type="card" class="demo-tabs" @tab-click="getList">
                <el-tab-pane label="全部" name="0" />
                <el-tab-pane label="新线索" name="1" />
                <el-tab-pane label="老线索" name="2" />
            </el-tabs>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="120px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="线索名称/手机号">
                                <el-input v-model="search.keys" placeholder="请输入名称或手机号" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="类型">
                                <el-select v-model="search.user_type" placeholder="请选择类型">
                                    <el-option label="全部" value="0" />
                                    <el-option label="我的" value="1" />
                                    <el-option label="团队" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="性别">
                                <el-select v-model="search.sex" clearable placeholder="请选择性别">
                                    <el-option label="全部" value="0" />
                                    <el-option label="男" value="1" />
                                    <el-option label="女" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="跟进人">
                                <el-select v-model="search.member_id" clearable placeholder="请选择跟进人">
                                    <el-option v-for="(item, index) in memberList" :key="index" :label="item.realname" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="关注">
                                <el-select v-model="search.is_like" placeholder="请选择关注">
                                    <el-option label="全部" value="0" />
                                    <el-option label="已关注" value="1" />
                                    <el-option label="未关注" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- 批量操作 -->
            <div style="margin-bottom: 10px;">
                <el-button type="primary" size="small" @click="add">新建</el-button>
                <el-button size="small" @click="tag">批量标签</el-button>
                <!-- <el-button size="small">合并</el-button> -->
                <el-button size="small" @click="share">共享</el-button>
                <el-button size="small" @click="transfer">转移</el-button>
                <el-button size="small" @click="invalid(null)">无效</el-button>
                <el-button size="small" @click="quit">退回</el-button>
                <el-button size="small" type="danger" plain @click="del">删除</el-button>
            </div>
            <!--
            <div style="float: right; margin-bottom: 10px;">
                <el-radio-group v-model="search.order" size="mini" @change="getList">
                    <el-radio :label="1">创建时间倒叙</el-radio>
                    <el-radio :label="2">创建时间正序</el-radio>
                    <el-radio :label="3">跟新时间倒序</el-radio>
                    <el-radio :label="4">更新时间正序</el-radio>
                </el-radio-group>
            </div>
            table -->
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event" @sort-change="onSortChange">
                <el-table-column type="selection" fixed width="40" />
                <el-table-column prop="name" label="关注" fixed align="center" width="50">
                    <template #default="scope">
                        <i v-if="scope.row.is_like" class="el-icon-star-on" style="font-size: 28px; color: #ffc958; cursor: pointer;" @click="handleLike(scope.row)" />
                        <i v-else class="el-icon-star-off" style="font-size: 24px; color: #ddd; cursor: pointer;" @click="handleLike(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column prop="created" label="创建时间" sortable="custom" :sort-orders="['ascending', 'descending']" fixed width="140" />
                <el-table-column prop="member" label="跟进人" fixed width="100" />
                <el-table-column prop="name" label="线索名称" fixed width="200">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row)">{{ scope.row.name }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="电话号码" width="120" />
                <el-table-column prop="sex" label="性别" width="50">
                    <template #default="scope">
                        <span>{{ scope.row.sex | sexFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="from_name" label="来源渠道" width="140" />
                <el-table-column prop="level_name" label="线索等级" width="140" />
                <el-table-column prop="quit_time" label="退回时间"  sortable="custom" :sort-orders="['ascending', 'descending']" width="200">
                    <template #default="scope">
                        <span style="color: #f00;">{{ scope.row.quit_time }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="use_money" label="贷款额度" width="100">
                    <template #default="scope">
                        <span>{{ scope.row.use_money ? (scope.row.use_money + ' 万元') : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="has_house" label="是否有房" width="100">
                    <template #default="scope">
                        <span>{{ scope.row.has_house ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="house_type_name" label="房产类型" width="120" />
                <!-- <el-table-column prop="name" label="发薪方式" width="120" /> -->
                <el-table-column prop="last_log" label="跟进记录" width="300" />
                <el-table-column prop="last_log_time" label="最近跟进时间"  sortable="custom" :sort-orders="['ascending', 'descending']" width="140" />
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="invalid(scope.row.id)">无效</el-button>
                        <el-button type="text" size="small" @click="toKehu(scope.row.id)">转客户</el-button>
                        <el-button  v-if="scope.row.from_data==8" type="text" size="small" @click="garbage(scope.row.id)">标记劣质</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div style="margin-top: 20px; text-align: right;">
                <el-pagination
                    :current-page="search.pages"
                    :page-size="search.limit"
                    :total="search.total"
                    :page-sizes="[10, 20, 50, 100]"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </page-main>
        <!-- 新增 -->
        <add-dialog ref="userAdd" @success="getList" />
        <!-- 标签设置 -->
        <tag-dialog ref="userTag" @success="setTag" />
        <!-- 分享 -->
        <share-dialog ref="userShare" @success="getList" />
        <!-- 转移 -->
        <transfer-dialog ref="userTransfer" @success="getList" />
        <!-- 详情 -->
        <detail-drawer ref="detailDrawer" @success="getList" />
    </div>
</template>

<script>
import {userList, delUser, quit, toKehu, changeStatus, setManyTag, nouse, toExcellent, toGarbage} from '@/api/clue'
import { memberList } from '@/api/system'
import { star } from '@/api/common'
import AddDialog from './components/AddDialog'
import TagDialog from './components/TagDialog'
import ShareDialog from './components/ShareDialog'
import TransferDialog from './components/TransferDialog'
import DetailDrawer from './components/DetailDrawer'
export default {
    name: 'ClueMine',
    components: {
        AddDialog,
        TagDialog,
        ShareDialog,
        TransferDialog,
        DetailDrawer
    },
    filters: {
        sexFilter(val) {
            const map = {
                0: '未知',
                1: '男',
                2: '女'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                user_type: '1', // 0全部1我的2团队
                xiansuo_status: '0', // 0全部1新线索2老线索
                sex: '', // 0全部1男2女
                keys: '', // 昵称手机号搜索
                member_id: '', // 跟进人id
                is_like: '0',
                order: 1,
                pages: 1,
                limit: 10,
                total: 0
            },
            memberList: [],
            dataList: [],
            selectionDataList: [],
            addDialogVisible: false
        }
    },
    mounted() {
        this.getOptions();
        this.getList();
    },
    methods: {
        detail(row) {
            this.$refs.detailDrawer.showDialog(row, this.search, 'mine');
        },
        // 新建
        add() {
            this.$refs.userAdd.showDialog();
        },
        onSortChange(e) {
            var fileds = e.prop;
            var ddesc = 1;
            if (fileds == "created") {
                ddesc = e.column.order === "ascending" ?  2 : 1;
            } else if (fileds == "quit_time") {
                ddesc = e.column.order === "ascending" ?  6 : 5;
            } else {
                ddesc = e.column.order === "ascending" ?  4 : 3;
            }

            this.search.pages = 1;
            this.search.order = ddesc;
            this.getList();

        },
        // 批量标签设置
        tag() {
            if (this.selectionDataList.length > 0) {
                this.$refs.userTag.showDialog();
            } else {
                this.$message({ type: 'warning', message: '请至少选中一条线索！'});
            }
        },
        //
        setTag(list) {
            const params = {};
            let selectTags = list.map(item => {
                return item.id
            })
            let ids = this.selectionDataList.map(item => {
                return item.id
            })
            params.tag = selectTags.join(',');
            params.ids = ids.join(',');
            setManyTag(params).then(res => {
                if (res.status) {
                    this.getList();
                    this.$message.success('标签设置成功！')
                }
            })
        },
        // 分享
        share() {
            if (this.selectionDataList.length > 0) {
                this.$refs.userShare.showDialog(this.selectionDataList);
            } else {
                this.$message({ type: 'warning', message: '请至少选中一条线索！'});
            }
        },
        // 转移
        transfer() {
            if (this.selectionDataList.length > 0) {
                this.$refs.userTransfer.showDialog(this.selectionDataList);
            } else {
                this.$message({ type: 'warning', message: '请至少选中一条线索！'});
            }
        },
        // 删除
        del() {
            if (this.selectionDataList.length > 0) {
                this.$alert('确定将选中线索删除？', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: true,
                    callback: action => {
                        if (action == 'confirm') {
                            let ids = this.selectionDataList.map(item => {
                                return item.id
                            })
                            delUser({ids: ids.join(',')}).then(res => {
                                if (res.status) {
                                    this.getList();
                                    this.$message({ type: 'success', message: '删除成功！'});
                                }
                            })
                        }
                    }
                });
            } else {
                this.$message({ type: 'warning', message: '请至少选中一条线索！'});
            }
        },
        // 退回
        quit() {
            if (this.selectionDataList.length > 0) {
                this.$alert('确定将选中线索退回？', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: true,
                    callback: action => {
                        if (action == 'confirm') {
                            let ids = this.selectionDataList.map(item => {
                                return item.id
                            })
                            quit({ids: ids.join(',')}).then(res => {
                                if (res.status) {
                                    this.getList();
                                    this.$message({ type: 'success', message: '退回成功！'});
                                }
                            })
                        }
                    }
                });
            } else {
                this.$message({ type: 'warning', message: '请至少需要退回的线索！'});
            }
        },
        // 无效
        invalid(id) {
            if (this.selectionDataList.length > 0 || id) {
                this.$alert('确定将选中线索设置无效？', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: true,
                    callback: action => {
                        if (action == 'confirm') {
                            let ids = [];
                            if (id) {
                                ids.push(id);
                            } else {
                                ids = this.selectionDataList.map(item => {
                                    return item.id
                                })
                            }
                            // 状态1待确认2确认资质3建立信任4无效5客户6未成交7已成交
                            nouse({ids: ids.join(',')}).then(res => {
                                if (res.status) {
                                    this.getList();
                                    this.$message({ type: 'success', message: '设置无效成功！'});
                                }
                            })
                        }
                    }
                });
            } else {
                this.$message({ type: 'warning', message: '请选中需要设置无效的线索！'});
            }
        },
        // 转客户
        toKehu(id) {
            if (id) {
                this.$alert('确定将该线索转客户？', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: true,
                    callback: action => {
                        if (action == 'confirm') {
                            toKehu({ids: id}).then(res => {
                                if (res.status) {
                                    this.getList();
                                    this.$message({ type: 'success', message: '转客户成功！'});
                                }
                            })
                        }
                    }
                });
            } else {
                this.$message({ type: 'error', message: '参数异常！'});
            }
        },
        excellent(id) {
            this.$alert('确定将该线索标记为优质？', '提示', {
                confirmButtonText: '确定',
                showCancelButton: true,
                callback: action => {
                    if (action == 'confirm') {
                        toExcellent({ids: id}).then(res => {
                            if (res.status) {
                                this.$message({ type: 'success', message: '标记成功！'});
                            }
                        })
                    }
                }
            });
        },
        garbage(id) {
            this.$alert('确定将该线索标记为劣质？', '提示', {
                confirmButtonText: '确定',
                showCancelButton: true,
                callback: action => {
                    if (action == 'confirm') {
                        toGarbage({ids: id}).then(res => {
                            if (res.status) {
                                this.$message({ type: 'success', message: '标记成功！'});
                            }
                        })
                    }
                }
            });
        },
        // 关注
        handleLike(row) {
            const params = {
                type: 1,
                pid: row.id,
                status: Math.abs(1 - row.is_like)
            }
            star(params).then(res => {
                console.log(res);
                if (res.status) {
                    this.getList();
                    this.$message({ type: 'success', message: params.status ? '已关注' : '取消关注'});
                }
            })
        },
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.search.user_type = '1';
            this.search.keys = '';
            this.search.sex = '';
            this.search.member_id = '';
            this.search.is_like = '0';
            this.search.pages = 1;
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            userList(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                    this.search.total = Number(res.data.count);
                }
                this.loading = false;
            })
        },
        // 获取 options
        getOptions() {
            memberList().then(res => {
                this.memberList = res.data.list || []
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.tag-box {
    width: 100%;
    display: flex;
    overflow: hidden;
}
.el-tag {
    margin: 2px;
}
</style>
